<template>
  <s-page custom-class="Cell-Page">
    <view class="container">
      <c-demo-block title="基础用法">
        <s-cell-group>
          <s-cell title="标题" value="内容" />
          <s-cell title="标题" value="内容" />
        </s-cell-group>
      </c-demo-block>

      <c-demo-block title="图标">
        <s-cell-group>
          <s-cell title="图标" icon="setting-o" />
          <s-cell title="颜色" icon="setting-o" icon-color="red" />
          <s-cell title="大小" icon="setting-o" icon-size="50" />
          <s-cell title="图片" icon="/static/imgs/logo.png" />
        </s-cell-group>
      </c-demo-block>

      <c-demo-block title="箭头">
        <s-cell-group>
          <s-cell title="标题" value="内容" arrow />
          <s-cell title="标题" value="内容" arrow arrow-icon="arrow-down" />
        </s-cell-group>
      </c-demo-block>

      <c-demo-block title="无线条">
        <s-cell-group>
          <s-cell v-for="i of list" :key="i" :border="false" title="单元格" />
        </s-cell-group>
      </c-demo-block>

      <c-demo-block title="无点击效果">
        <s-cell-group>
          <s-cell v-for="i of list" :key="i" hover-class="none" title="单元格" />
        </s-cell-group>
      </c-demo-block>

      <c-demo-block title="事件">
        <s-cell-group>
          <s-cell v-for="i of list" :key="i" title="单元格" @click="handleClick(i)" />
        </s-cell-group>
      </c-demo-block>

      <c-demo-block title="插槽">
        <s-cell-group>
          <s-cell>
            <view>默认插槽</view>
          </s-cell>
          <s-cell title="图标插槽">
            <s-icon slot="icon" name="friends" size="40" color="rgb(255, 121, 0)" custom-style="margin-right:10rpx" />
          </s-cell>
          <s-cell>
            <view slot="title" style="display: flex; align-items: center">
              <text>标题插槽</text>
              <s-badge :absolute="false" value="99+" custom-style="margin-left:8rpx" />
            </view>
          </s-cell>
          <s-cell title="右侧插槽">
            <s-icon slot="right" name="like" color="red" />
          </s-cell>
        </s-cell-group>
      </c-demo-block>
    </view>
  </s-page>
</template>

<script>
export default {
  data: () => ({
    list: [1, 2],
  }),
  methods: {
    handleClick(i) {
      uni.showToast('点击事件');
    },
  },
};
</script>

<style lang="scss">
.Cell-Page {
  ::v-deep {
    .c-demo-block {
      &__title {
        padding-left: $padding-md;
      }
    }
  }
  .container {
  }
}
</style>
